<template>
  <div class="header-container">
    <div>
      <p>用户：{{ username }}</p>
    </div>
    <div class="center-content">
      <h1>欢迎使用中医问诊系统</h1>
    </div>
    <div class="top-footer">
      <el-button type="primary" plain @click="logout"> 退出登录</el-button>
    </div>
  </div>

  <div class="parent-container">
    <div v-if="answerFormShow" style="border: 1px solid #ccc; border-radius: 8px; padding: 20px;">

      <el-form :model="form" ref="formRef"  @submit.native.prevent="handleSubmit">
        <div v-for="(problemTypeVo, indexa) in problemTypeVoList" :key="problemTypeVo.type" class="problem-item">

          <span style="font-weight: bold; font-size: 24px;">{{ problemTypeVo.typeName }}</span>
          <div style="border: 1px solid #ccc; border-radius: 8px; padding: 20px;">
            <div v-for="(problem, index) in problemTypeVo.problemVoList" :key="problem.id" class="problem-item">
              <div class="label-wrapper">
                <div class="label" style="font-weight: bold; font-size: 16px;">{{ index + 1 }}. {{
                    problem.problemName
                  }}
                </div>
              </div>
              <div class="checkbox-wrapper">
                <el-checkbox-group v-if="problem.type === '0'" v-model="problem.selectedAnswerIds">
                  <el-checkbox
                      v-for="(answer, answerIndex) in problem.answerDtoList"
                      :key="answer.id"
                      :label="answer.id"
                  >
                    {{ answer.answer }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </el-form>

    </div>

    <div v-if="answerDoneShow" class="center-content" style="margin-bottom: 20px;margin-top: 300px;">
      <h3>您已完成问诊，请点击下方按钮查看问诊结果</h3>
      <el-button v-if="diseasebutton" type="primary"  @click="getResult">查看病症</el-button>
    </div>
    <div v-if="diseaseShow" class="center-content">

      <div class="center-content" v-for="disease in diseases" :key="disease.name" style="margin-bottom: 20px;margin-top: 300px;">
        <h1>病症：{{ disease.name }}</h1>
        <h3 style="margin-top: 80px;">病症描述：{{ disease.description }}</h3>
      </div>
    </div>
  </div>

  <div class="dialog-footer">
    <el-button v-if="answerbutton" type="primary" @click="handleSubmit" class="fixed-bottom-right">下一页</el-button>
  </div>

</template>

<script setup name="qa">
import {qaList, getQaResult} from "@/api/medical/qa/qa.js";

import {ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user.js";

const userStore = useUserStore()
const {proxy} = getCurrentInstance();
const answerbutton = ref(true);
const diseasebutton = ref(false);
const diseaseShow = ref(false);
const answerFormShow = ref(true);
const answerDoneShow = ref(false);
const formRef = ref(null); // 用于后续可能需要访问表单实例
const form = ref({}); // 初始的表单数据，但在这个示例中我们不会直接用它来存储答案
const problemTypeVoList = ref([]);
const diseases = ref([]);
const username = ref("");


function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logOut().then(() => {
      location.href = '/index';
    })
  }).catch(() => {
  });
}

function handleSubmit() {

  for (var i = 0; i < problemTypeVoList.value.length; i++) {
    if (problemTypeVoList.value[i].problemVoList.some(problem => !problem.selectedAnswerIds || problem.selectedAnswerIds.length === 0)) {
      // Show an error message or handle the validation error
      proxy.$modal.msgError("每个问题请至少选择一个答案！");
      return;
    }
  }

  // 遍历problemVos，获取每个问题的选中答案
  const submittedData = problemTypeVoList.value.map(item => {
    // 使用 map 来处理 item.problemVoList，收集每个 problem 的所需数据
    return item.problemVoList.map(problem => ({
      problemId: problem.id,
      answerIds: problem.selectedAnswerIds,
      // 如果需要，还可以添加其他属性或逻辑
    }));
  }).flat();
  //查询答案相关的问题
  qaList(submittedData).then(response => {
    if (response.data.length === 0) {
      answerFormShow.value = false;
      answerDoneShow.value = true;
      //查看病症，展示查看病症的按钮
      diseasebutton.value = true;
      answerbutton.value = false;
    } else {
      problemTypeVoList.value = response.data;
      diseasebutton.value = false;
      answerbutton.value = true;
    }
  });
}

function getResult() {
  diseasebutton.value = false;
  answerDoneShow.value = false;
  diseaseShow.value = true;
  getQaResult().then(response => {
    //渲染病症
    diseases.value = response.data;
  })
}

function queryQaList() {
  username.value = userStore.name;
  const submittedData = ref([]);
  qaList(submittedData.value).then(response => {
    problemTypeVoList.value = response.data;
  });
}

queryQaList();


</script>
<style>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 如果需要占据整个视口高度 */
}

.mb8 {
  /* 如果Element UI的mb8类有margin-bottom样式，则保持它 */
}

.flex-row {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.justify-end {
  justify-content: flex-end; /* 水平靠右对齐 */
}

.flex-grow-1 {
  flex-grow: 1; /* 占据剩余空间 */
}

.content-wrapper {
  /* 如果需要，可以添加额外的样式来包裹el-col的内容 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 如果需要垂直居中内容 */
  justify-content: center; /* 如果需要水平居中内容 */
  /* ... 其他样式 ... */
}

.disease-list-container {
  /* 你可以在这里添加额外的样式来美化疾病列表 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 如果需要垂直居中列表 */
  width: 80vh;
  /* ... 其他样式 ... */
}

.disease-item {
  /* 你可以在这里添加每个疾病项的样式 */
  margin-bottom: 20px; /* 每个疾病项之间的间距 */
  text-align: left; /* 文本左对齐，或根据需要调整 */
  /* ... 其他样式 ... */
}

.flex-row {
  display: flex;
  /* justify-content 控制主轴（默认水平方向）上的对齐方式 */
  justify-content: space-between; /* 元素之间间隔相等，且第一个元素与容器开始处对齐，最后一个元素与容器结束处对齐 */
  /* align-items 控制交叉轴（默认垂直方向）上的对齐方式 */
  align-items: center; /* 垂直居中对齐 */
}

.parent-container {
  /* 假设你想要让 app-container 在整个页面中居中 */
  position: fixed;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 85vh; /* 设置容器高度为视口高度 */
  top:80px;
  left: 10%;
  right: 10%;
  width: 80%;
  /*margin: 0; !* 移除默认的margin *!*/
  /*margin-top: 50px;*/
  flex-direction: column;

  overflow-y: auto; /* 当内容超出高度时显示垂直滚动条 */
  /* 还可以添加其他样式，如背景色等 */
}

.top-footer {
  position: fixed;
  top: 20px; /* 距离页面底部的距离 */
  right: 120px; /* 距离页面右边的距离 */
  /* 其他样式，如宽度、高度、背景色等 */
}

.dialog-footer {
  /*position: fixed;*/
  /*bottom: 20px; !* 距离页面底部的距离 *!*/
  /*right: 120px; !* 距离页面右边的距离 *!*/
  /* 其他样式，如宽度、高度、背景色等 */
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  /* 根据需要设置高度 */
  height: 60px; /* 或者其他您想要的高度 */
  background-color: #f8f9fa; /* 可选：设置背景颜色 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  padding: 0 20px; /* 添加一些内边距以避免内容紧贴边缘 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：添加阴影效果 */
  z-index: 1000; /* 确保它位于其他内容之上 */
}

.problem-item {
  margin-bottom: 20px;
}

.checkbox-wrapper {
  width: 100%;
  margin-top: 20px;
}

.middle-text {
  position: absolute;
  top: -10px; /* 根据需要调整，负数表示向上移动，使其看起来在边框上方 */
  left: 30px; /* 左侧距离 div 左边 30px */
  /* 如果需要，可以添加背景色、边框、内边距等样式 */
  background-color: #fff; /* 背景色，可能需要与边框色对比 */
  padding: 0 5px; /* 文本的内边距 */
  /* 其他样式，如字体大小、颜色等 */
}

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 根据需要设置高度 */
  height: 60px; /* 或者其他您想要的高度 */
  background-color: #f8f9fa; /* 可选：设置背景颜色 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  padding: 0 20px; /* 添加一些内边距以避免内容紧贴边缘 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：添加阴影效果 */
  z-index: 1000; /* 确保它位于其他内容之上 */
}

.center-content {
  /* 使用 margin 自动（auto）来在 Flex 容器中水平居中 */
  margin-left: auto;
  margin-right: auto;
  /* 如果您希望标题旁边有足够的空间，可以增加这个值 */
  max-width: calc(100% - 40px); /* 减去左右内边距的影响 */
  /* 可选：添加一些样式以强调标题 */
  text-align: center;
}

.fixed-bottom-right {
  position: absolute;
  right: 120px; /* 距离右边框的距离 */
  bottom: 20px; /* 距离底边框的距离 */
}
</style>

